<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib  prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="redis" uri="http://www.shopjsp.com/redisTag/functions" %>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<c:set var="basePath" value="${redis:getSysConfig('base_path_back')}"/>
<script type="text/javascript">
    /**
     * 自定义验证规则
     */
    function validateForm(){
        form.bootstrapValidator({
            message: "无效的值",
            feedbackIcons: {
                valid: "glyphicon glyphicon-ok",
                invalid: "glyphicon glyphicon-remove",
                validating: "glyphicon glyphicon-refresh"
            },
            fields: {
                shopsName: {
                    validators: {
                        notEmpty: {message: "商城名称不可为空"},
                        stringLength: {max: 50,message: "商城名称最大长度为50"}
                    }
                },
                regionLocation: {
                    validators: {
                        notEmpty: {message: "请选择省份"}
                    }
                },
                city: {
                    validators: {
                        notEmpty: {message: "请选择城市"}
                    }
                },
                address: {
                    validators: {
                        notEmpty: {message: "商城详细地址不可为空"},
                        stringLength: {min: 2,max: 100,message: "商城详细地址长度为2至100"}
                    }
                },
                note: {
                    validators: {
                        stringLength: {max: 100,message: "备注最大长度为100"}
                    }
                }
            }
        });
    }

    /**
     * 添加热门商圈信息
     */
	<shiro:hasPermission name="back_gotoShopsPage_add">
    function addInfo(){
        $("#myModalLabel").empty().text("添加热门商圈信息");
        /**清空隐藏域的值**/
        $("#shopsId").val("");
        $("#shopsCode").val("");
        $("#createTime").val("");
        $("#regionLocation").val("");
        $("#city").val("");
        resetAddForm();
    }
	</shiro:hasPermission>

    /**
     * 编辑热门商圈信息
     */
	<shiro:hasPermission name="back_gotoShopsPage_update">
    function editInfo(){
        $("#myModalLabel").empty().text("修改热门商圈信息");
        /**获取选中行的id**/
        var selectedRow= $("#tt").bootstrapTable('getSelections');
        if(selectedRow.length==1){
            var id=selectedRow[0].shopsId;
            $("#btn_edit").attr("data-target","#addOrEditModal");/**选中了记录后才可打开对应的模态框**/
            $.ajax({
                type: "POST",
                dataType: "JSON",
                url: "${basePath}/back/shops/getShopsObject.sjson",
                data: {shopsId:id},
                success: function(result){
                    var data = JSON.parse(result.data);
                    var shopShops = data.shopShops;
                    /**隐藏域**/
                    $("#shopsId").empty().val(shopShops.shopsId);
                    $("#shopsCode").empty().val(shopShops.shopsCode);
                    $("#createTime").empty().val(new Date(shopShops.createTime).Format("yyyy-MM-dd hh:mm:ss"));
                    /**可见表单控件**/
                    $("#regionLocation").val(shopShops.regionLocation);
                    changeArea(shopShops.regionLocation,1,shopShops.city);
                    changeArea(shopShops.city,2,shopShops.areaCounty);
                    $("#shopsName").empty().val(shopShops.shopsName);
                    $("#address").empty().val(shopShops.address);
                    $("#note").empty().val(shopShops.note);
                }
            });
        }else{
            $("#btn_edit").attr("data-target", "");/**没有选中记录不可打开模态框**/
            showMsg("请选择一行记录！");
        }
    }
	</shiro:hasPermission>

    /**遍历查询地区信息**/
    function changeArea(id,level,selectId){
        $.ajax({
            url:"${basePath}/back/shops/findAreaList.sjson",
            type:"post",
            dataType:"json",
            data:{areaId:id},
            success:function(result){
                var data = JSON.parse(result.data);
                if(data!=""&&data!=null){
                    var areaList=data;
                    var htmlOption="<option value=''>--请选择--</option>";
                    for(var i=0;i<areaList.length;i++){
                        htmlOption+="<option value='" + areaList[i].areaId+"'id='" + areaList[i].areaId+"'>" + areaList[i].name+ "</option>";
                    }
                    //console.log(htmlOption);
                    if(level==1){
                        $("#city").html(htmlOption);
                        $("#city").val(selectId);
                        $("#threeArea").html("<option value=''>--请选择--</option>");
                    }else if(level==2){
                        $("#threeArea").html("");
                        $("#threeArea").append(htmlOption);
                        $("#threeArea").val(selectId);
                    }else if(level==3){
                        $("#threeArea").html("");
                        $("#threeArea").append(htmlOption);
                        $("#threeArea").val(selectId);
                    }
                }else{
                    $("#city").html("<option value=''>--请选择--</option>");
                }
            }
        });
    }

</script>
<!--添加编辑模态框（Modal） -->
<div class="modal fade" id="addOrEditModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static" >
	<div class="modal-dialog" style="width:70%">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
				<h5 class="modal-title" id="myModalLabel"></h5>
			</div>
			<div class="modal-body">
				<form id="form1"  method="post" action="${basePath}/back/shops/saveOrUpdateShops.sjson">
					<input type="hidden" id="shopsId" name="shopsId" />
					<input type="hidden" id="shopsCode" name="shopsCode">
					<input type="hidden" id="createTime" name="createTime">
					<table align="center" class="addOrEditTable table-bordered table" style="width:100%;">
						<tr>
							<td class="toright_td" width="150px"><span style="color:red">* </span>商城名称:&nbsp;&nbsp;</td>
							<td  class="toleft_td" colspan="3">
								<div class="form-group">
									<input type="text" class="form-control input-sm" id="shopsName" name="shopsName" placeholder="请输入商城名称"/>
								</div>
							</td>
						</tr>
						<tr>
							<td class="toright_td" width="150px"><span style="color:red">* </span>所在地区:&nbsp;&nbsp;</td>
							<td  class="toleft_td" width="220px">
								<div class="form-group">
									<select name="regionLocation" id="regionLocation" onchange="changeArea(this.value,'1','')" class="form-control input-sm">
										<option value="">--请选择省份--</option>
										<c:forEach items="${firstAreaList}" var="first" >
											<option value="${first.areaId}" id="${first.areaId}">${first.name}</option>
										</c:forEach>
									</select>
								</div>
							</td>
							<td  class="toleft_td" width="220px">
								<div class="form-group">
									<select name="city" id="city" onchange="changeArea(this.value,'2','')" class="form-control input-sm">
										<option value="" >--请选择城市--</option>
									</select>
								</div>
							</td>
						</tr>
						<tr>
							<td class="toright_td" width="150px"><span style="color:red">* </span>商城详细地址:&nbsp;&nbsp;</td>
							<td  class="toleft_td" colspan="3">
								<div class="form-group">
									<input type="text" class="form-control input-sm" id="address" name="address" placeholder="请输入商城详细地址"/>
								</div>
							</td>
						</tr>
						<tr>
							<td class="toright_td" width="150px">备注:&nbsp;&nbsp;</td>
							<td  class="toleft_td" colspan="3">
								<div class="form-group">
									<textarea class="form-control input-sm" type="text" id="note" name="note" placeholder="请输入备注"></textarea>
								</div>
							</td>
						</tr>
					</table>
				</form>
			</div>
			<div class="modal-footer">
				<button type="button" id="validateBtn" class="btn btn-primary"  onclick="submitForm()">保存</button>
				<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
			</div>
		</div>
	</div>
</div>